<template>
    <PageTabelLayout>
        <template #pageHeader>
            <div class="my-header" style="padding-left: 10px;" v-if="headerShow">
                <a-form size="small" :model="searchData" auto-label-width layout="inline">
                    <a-form-item label-col-flex="80px" :style="{ width: '320px' }" label="流转卡号">
                        <a-input class="bacClass" allow-clear v-model="searchData.flowCardCode" />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" :style="{ width: '320px' }" label="工序">
                        <a-input class="bacClass" allow-clear v-model="searchData.process" />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" :style="{ width: '320px' }" label="班组">
                        <a-input class="bacClass" allow-clear disabled />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" :style="{ width: '320px' }" label="开卡日期">
                        <a-range-picker class="bacClass" @change="changeDate" allow-clear />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" :style="{ width: '320px' }" label="车间">
                        <a-input class="bacClass" allow-clear v-model="searchData.workshop" />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" :style="{ width: '320px' }" label="客户名称">
                        <a-input class="bacClass" allow-clear v-model="searchData.customName" />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" :style="{ width: '320px' }" label="工号">
                        <a-input class="bacClass" allow-clear v-model="searchData.staffCode" />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" :style="{ width: '320px' }" label="姓名">
                        <a-input class="bacClass" allow-clear v-model="searchData.staffName" />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" :style="{ width: '320px' }" label="筛选">
                        <a-select allow-clear class="bacClass">
                            <a-option value="全部">全部</a-option>
                            <a-option value="开始">开始</a-option>
                            <a-option value="结束">结束</a-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label-col-flex="80px" :style="{ width: '320px' }" label="审核">
                        <a-select allow-clear class="bacClass">
                            <a-option value="全部">全部</a-option>
                            <a-option value="已审核">已审核</a-option>
                            <a-option value="未审核">未审核</a-option>
                        </a-select>
                    </a-form-item>
                </a-form>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
            <div class="my-tool-bar" style="padding:0px 10px 10px 10px;">
                <Toolbar :items="['查询']" @select="selectHandler" />
            </div>
        </template>
        <template #pageTabel>
            <a-tabs :justify="true" :default-active-key="tabsKeys" @change="selectHandler">
                <a-tab-pane title="未开始" :key="1">
                    <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
                        <AgGridVue :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                            rowSelection="multiple" @grid-ready="gridReady" style="height: 100%;"
                            class='ag-theme-alpine' :defaultColDef="defaultColDef" :rowData="pageData.dataList"
                            :columnDefs="cfsValue" :localeText="localeTextData" @columnResized="onColumnResized"
                            @columnMoved="onColumnMoved" @FilterChanged="onFilterChangeds" @sortChanged="sortChanged">
                        </AgGridVue>
                    </a-spin>
                </a-tab-pane>
                <a-tab-pane title="进行中" :key="2">
                    <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
                        <AgGridVue :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                            rowSelection="multiple" @grid-ready="gridReady" style="height: 100%;"
                            class='ag-theme-alpine' :defaultColDef="defaultColDef" :rowData="pageData.dataList"
                            :columnDefs="cfsValue" :localeText="localeTextData" @FilterChanged="onFilterChangeds"
                            @sortChanged="sortChanged">
                        </AgGridVue>
                    </a-spin>
                </a-tab-pane>
                <a-tab-pane title="已完成" :key="3">
                    <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
                        <AgGridVue :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                            rowSelection="multiple" @grid-ready="gridReady" style="height: 100%;"
                            class='ag-theme-alpine' :defaultColDef="defaultColDef" :rowData="pageData.dataList"
                            :columnDefs="cfsValue" :localeText="localeTextData" @FilterChanged="onFilterChangeds"
                            @sortChanged="sortChanged">
                        </AgGridVue>
                    </a-spin>
                </a-tab-pane>
            </a-tabs>
        </template>
        <a-pagination :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
            @change="changePage" @page-size-change="changeSize" style="justify-content: center;margin-top: 10px;"
            :page-size="pagination.pageSize" :current="pagination.page" />

        <a-modal :visible="pageData.visible" :mask-closable="false" :footer="false">
            <template #title> 工序交接 </template>
            <div>工序名称：</div>
            <div>接收人：<span><a-input class="bacClass" allow-clear style="width:200px" /></span></div>
            <div>当前工序结束时间：<span style="color:red">{{ pageData.timer }}</span></div>
            <span slot="footer" style="float:right;">
                <a-button style="margin-right:10px;" @click="pageData.visible = false">取消</a-button>
                <a-button type="primary" :loading="Loading = false" @click="handleOk">确认</a-button>
            </span>
        </a-modal>
    </PageTabelLayout>
</template>

<script lang="ts">
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import { ref, reactive, onMounted } from 'vue';
import { AgGridVue } from 'ag-grid-vue3'
import { localeText } from '@/api/aggridZw'
import emitter from '@/hooks/useEventBus'
import { usePagination, useTable } from '@/hooks/table';
import { processScan } from '@/api/DyeingshopManagement/workshopProcessScan'
import { wordProcess } from '@/api/DyeingshopManagement/getOrderFn';
import { Message } from '@arco-design/web-vue';
import { pagingList } from "@/api/paging";
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
import { post } from '@/api/http';
import dayjs from 'dayjs'

export default {
    name: "farmScanList2",
    setup() {
        onMounted(() => {
            doRefresh();
            emitter.on("refresh-farmScanList2", () => {
                doRefresh();
            });
        })
        let headerShow = ref<boolean>(true);
        let processScanApi = processScan();
        const table = useTable();
        const pagination = usePagination(doRefresh);
        const pagingList1: any = ref(pagingList)
        const localeTextData: any = ref(localeText);
        const total = ref(10);
        const changePage = (val: any) => {
            pagination.page = val
            doRefresh();
        }
        const changeSize = (val: any) => {
            pagination.pageSize = val
            doRefresh();
        }

        const tabsKeys = ref(1)
        const selectHandler = () => {
            pagination.page = 1;
            if (tabsKeys.value == 1) {
                doRefresh()
            } else if (tabsKeys.value == 2) {
                doRefresh()
            } else if (tabsKeys.value == 3) {
                doRefresh()
            }
        }

        const searchData = reactive({
            workshop: '',
            process: '',
            beginClasses: '',
            finishClasses: '',
            createTime: '',
            createTime2: '',
            flowCardCode: '',
            customName: '',
            staffCode: '',
            staffName: ''
        });

        const pageData = ({
            dataList: [],
            visible: false,
            pageLoading: false,
            timer: '',
        });

        // function doRefresh() {
        //     pageData.pageLoading = true;
        //     processScanApi.getProcessList({
        //         page: pagination.page,
        //         limit: pagination.pageSize,
        //     }, {
        //         ...searchData
        //     }).then(({ data, code, message }: any) => {
        //         if (code === 200) {
        //             gridOption.value.setRowData(data.list);
        //             total.value = data.total;
        //         } else {
        //             Message.error(message)
        //         }
        //     }).catch(console.log).finally(() => {
        //         pageData.pageLoading = false;
        //     });
        // };

        function doRefresh() {
            // pageData.pageLoading = true;
            post({
                url: `/dwWorkShop/workshopProcess/findWorkshopSequence`,
                data: {
                    flowCardCode: searchData.flowCardCode
                }
                // data: {
                //     page: ,
                //     size: pagination.pageSize,
                // }
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    table.handleSuccess(data.list);
                    pageData.dataList = data.list
                    gridOption.value.setRowData(data.list)
                    total.value = data.total;
                }
            }).catch(console.log).finally(() => {
                pageData.pageLoading = false
            })
        };
        const printArrangCardHandler = () => { };
        const scanDyePartHndler = () => { };
        const gridOption = ref();
        const colState = ref()
        const changeDate = (data: any) => {
            searchData.createTime = data ? data[0] : '';
            searchData.createTime2 = data ? data[1] : '';
        };
        const gridReady = (params: any) => {
            gridOption.value = params.api;
            colState.value = params.columnApi
        };

        const onFilterChangeds = (params: any) => {
            params.api.forEachNode((node, index) => {
                const rowIndex = index + 1;
                if (node.data.ROW_INDECX !== rowIndex) {
                    node.setDataValue('ROW_INDECX', rowIndex);
                }
            });
        }

        const sortChanged = (params) => {
            params.api.forEachNode((node, index) => {
                const rowIndex = index + 1;
                if (node.data.ROW_INDECX !== rowIndex) {
                    node.setDataValue('ROW_INDECX', rowIndex);
                }
            });
        };

        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            width: 150,
        };
        const cfsValue = [
            {
                headerName: '车间',
                field: 'workshop',
            },
            {
                headerName: '工段',
                field: 'section',
            },
            {
                headerName: '工序',
                field: 'process',
            },
            {
                headerName: '次序号',
                field: 'orderNum',
            },
            {
                headerName: '流转卡号',
                field: 'flowCardCode',
            },
            {
                headerName: '客户名称',
                field: 'customName',
            },
            {
                headerName: '设备编号',
                field: 'machineCode',
            },
            {
                headerName: '色号',
                field: 'colorCode',
            },
            {
                headerName: '色称',
                field: 'colorName',
            },
            {
                headerName: '布号',
                field: 'greyCode',
            },
            {
                headerName: '匹数',
                field: 'houseNum',
            },
            {
                headerName: '重量',
                field: 'flowCardWeight',
            },
            {
                headerName: '车号',
                field: 'mobile',
            },
            {
                headerName: '开始员工',
                field: 'beginStaff',
            },
            {
                headerName: '计划开始时间',
                field: 'planBeginTime',
            },
            {
                headerName: '计划结束时间',
                field: 'planFinshTime',
            },
            {
                headerName: '实际开始时间',
                field: 'realityBeginTime',
            },
            {
                headerName: '实际结束时间',
                field: 'realityFinishTime',
            },
            {
                headerName: '结束员工',
                field: 'finishStaff',
            },
            {
                headerName: '是否审核',
                field: 'createTime',
            },
            {
                headerName: '审核人',
                field: 'updateName',
            },
            {
                headerName: '审核日期',
                field: 'updateTime',
            },
            {
                headerName: '备注',
                field: 'remark',
            },
            {
                headerName: '开始班组',
                field: 'updateTime',
            },
            {
                headerName: '结束班组',
                field: 'updateTime',
            },
            {
                headerName: '作业性质',
                field: 'updateTime',
            },
            {
                headerName: '操作',
                field: 'action',
                resizable: false,
                filter: false,
                sortable: false,
                lockPosition: 'right',
                width: '100',
                pinned: 'right',
                cellRenderer: {
                    template: `<a-button type="primary" status="success" size="mini" @click="Reception()">接收</a-button>`,
                    setup(props: any) {
                        return {
                            Reception,
                        }
                    }
                },
            },
        ];


        const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('farmScan02', gridOption, colState, cfsValue)
        const onColumnMoved = () => {
            saveGridState01()
        }
        const onColumnResized = () => {
            saveGridState01()
        }

        //接收
        const Reception = () => {
            pageData.visible = true
            pageData.timer = dayjs().format('YYYY-MM-DD HH:mm:ss')
        }
        return {
            tabsKeys,
            saveOrUpdateGridState01,
            saveGridState01,
            updateGridState01,
            onColumnMoved,
            onColumnResized,
            colState,
            pagingList1,
            headerShow,
            searchData,
            selectHandler,
            printArrangCardHandler,
            scanDyePartHndler,
            localeTextData,
            pagination,
            changeSize,
            total,
            changePage,
            gridReady,
            defaultColDef,
            cfsValue,
            pageData,
            changeDate,
        }
    },
    components: { PageTabelLayout, AgGridVue }
}
</script>

<style scoped>
.aInput {
    background: #fff;
    width: 270px;
    border: 1px solid #c9cdd3;
}

:deep(.arco-picker input) {
    padding-left: 0 !important;
}

:deep(.arco-picker) {
    padding-left: 0 !important;
}

:deep(.arco-picker-separator) {
    padding: 0 !important;
}
</style>